import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect, useRef } from 'react';
import { Button, Card, Table, Modal, Space, Drawer } from 'antd';
import { TableOutlined, PlusOutlined, MinusOutlined, RobotOutlined, MoreOutlined } from '@ant-design/icons';

import { metaDataRemoveObjectProperty, MetaDataObjectRelation } from '../../../../services';
import { ObjectPropertyEditor } from '../object-property-editor';
import { ComparsionOperator, dsFind } from '@/services/local';
import { CLASS_RELATION_CLASS_IDENTIFIER } from '@/services/constants';

export interface MetaDataObjectRelationsPanelProps {
    style?: CSSProperties;
    objectIdentifier: string;
}

export const MetaDataObjectRelationsPanel: React.FC<MetaDataObjectRelationsPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [data, setData] = useState<MetaDataObjectRelation[]>([]);

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [editOpen, setEditOpen] = useState<boolean>(false);

    const [assistantOpen, setAssistantOpen] = useState<boolean>(false);

    const [selected, setSelected] = useState<MetaDataObjectRelation | null>(null);

    const [page, setPage] = useState<number>(1);

    const [pageSize, setPageSize] = useState<number>(10);

    const [total, setTotal] = useState<number>(0);

    const columns = [
        {
            title: '标识',
            dataIndex: 'relationIdentifier',
            key: 'relationIdentifier',
            width: '140px',
            ellipsis: true,
        },
        {
            title: '源对象',
            dataIndex: 'srcObjectName',
            key: 'srcObjectName',
            width: '220px',
            ellipsis: true,
        },
        {
            title: '目标对象',
            dataIndex: 'targetObjectName',
            key: 'targetObjectName',
            width: '220px',
            ellipsis: true,
        },
        {
            title: '关系',
            dataIndex: 'targetObjectName',
            key: 'targetObjectName',
            width: '220px',
            ellipsis: true,
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '操作',
            dataIndex: '操作',
            key: '操作',
            render: (_, record, index) => {
                return (
                    <Space size="middle" key={record.identifier + index}>
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {
                                setSelected(record);
                                setIsModalOpen(true);
                            }}
                        >编辑</Button>
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {
                                await metaDataRemoveObjectProperty(record.id);
                                //
                            }}
                        >删除</Button>
                    </Space>
                );
            }
        },
    ];

    const request = async (identifier: string, page: number, pageSize: number, keywords?: string) => {
        setLoading(true);
        const { total, data } = await dsFind(0, CLASS_RELATION_CLASS_IDENTIFIER, {
            attributes: [
                {
                    name: 'class_identifier',
                    operator: ComparsionOperator.Equal,
                    value: identifier,
                }
            ],
            page_size: pageSize,
            page: page
        });
        setData(data);
        setTotal(total);
        setLoading(false);
    };

    useEffect(() => {
        request(props.objectIdentifier, page, pageSize);
    }, [props.objectIdentifier, page, pageSize]);

    return (
        <Content style={props.style}>
            <StyledCard
                style={{
                }}
                title={'属性列表'}
                styles={{
                    body: {
                        padding: '0px 2px'
                    }
                }}
            >
                <Buttons>
                    <Button
                        style={{
                            width: '90px',
                            backgroundColor: '#E02020'
                        }}
                        key={'ai'}
                        onClick={async () => {
                            setAssistantOpen(true);
                        }}
                        type={'primary'}
                        icon={<RobotOutlined />}
                    >AI</Button>,
                    <Button
                        style={{
                            width: '90px'
                        }}
                        key={'add'}
                        onClick={async () => {
                            //
                            setSelected(null);
                            setIsModalOpen(true);
                        }}
                        type={'primary'}
                        icon={<PlusOutlined />}
                    >添加</Button>
                </Buttons>
                <Table
                    bordered
                    loading={loading}
                    rowKey={'identifier'}
                    pagination={{
                        showSizeChanger: true,
                        total: total,
                        current: page,
                        pageSize: pageSize,
                        onChange: (page, pageSize) => {
                            setPage(page);
                        },
                        onShowSizeChange: (current, size) => {
                            setPageSize(size);
                        }
                    }}
                    dataSource={data} columns={columns} />
            </StyledCard>
            <Modal
                styles={{
                    content: {
                        minWidth: '600px',
                        minHeight: '400px'
                    }
                }}
                title={selected ? "编辑属性" : "添加属性"}
                footer={false}
                destroyOnClose={true}
                open={isModalOpen}
                onOk={async () => {
                    //刷新
                    setIsModalOpen(false);
                }} onCancel={async () => {
                    //刷新
                    setIsModalOpen(false);
                }}>
                <ObjectPropertyEditor objectIdentifier={props.objectIdentifier} item={selected} onFinish={async () => {
                    //刷新
                    await request(props.objectIdentifier, page, pageSize);
                    setIsModalOpen(false);
                }}></ObjectPropertyEditor>
            </Modal>
            <Drawer
                title="AI助手"
                onClose={() => {
                    setAssistantOpen(false);
                }}
                width={'calc(100% - 220px)'}
                destroyOnClose={true}
                open={assistantOpen}>
            </Drawer>
        </Content>
    );
}

const Content = styled.div`
    flex:  1;
    width: 100%;
    padding: 6px 6px;
    display: flex;
    gap: 6px;
`;

const Buttons = styled.div`
    width: 100%;
    padding: 6px 6px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
`;

const StyledCard = styled(Card)`
    width: 100%;
`

const EmptyContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
`;
